import React from 'react';
import {useHistory} from 'react-router-dom';
import { Form, Button, Input,Modal} from 'antd';
import { UserOutlined,KeyOutlined} from '@ant-design/icons';
import {login} from '../API/axios/user'

export default function Zmodal(props) {

    const history = useHistory();
    const [modalform] = Form.useForm();

    const userlogin = function () {
        login(modalform.getFieldsValue()).then(async res => {
            await alert(JSON.stringify(res.data));
            await localStorage.setItem('token','zys');
            await localStorage.setItem('usershow',true);
            props.showUser(false);
            history.push('/userhome');
            /*localstorage.setItem('token','')
              localstorage.setItem('userInfo','')
              if(res.data.code === ''){
                  } else if(){
                  } else{
                }
             */
        }).catch( err => {
            alert(JSON.stringify(err));
        })
    };

    return(
        <Modal
            visible={props.modalvisible}
            title="登录"
            onCancel={props.hidelogin}
            footer={[
                <Button key="back" onClick={props.hidelogin}>
                    返回
                </Button>,
                <Button onClick={userlogin} type="primary">
                    登陆
                </Button>,
            ]}
        >
            <Form form={modalform}>
                <Form.Item name='username' label={"用户"}>
                    <Input style={{"width" : "60%"}} prefix={<UserOutlined/>}/>
                </Form.Item>
                <Form.Item name='password' label={"密码"}>
                    <Input style={{"width" : "60%"}} type="password" prefix={<KeyOutlined />}/>
                </Form.Item>
            </Form>
        </Modal>
    )
}
